<script lang="ts" setup>
import { NSwitch } from "naive-ui";
import { watch } from "vue";
import { toRef } from "vue";

interface Props {
  label: string;
  value: boolean;
  disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  disabled: false,
});

const emits = defineEmits<{
  change: [value: boolean];
}>();

const value = toRef(props.value);

watch(
  () => value.value,
  (newVal) => {
    emits("change", newVal);
  }
);
</script>

<template>
  <div class="flex justify-between mb-2">
    <span>{{ label }}</span>
    <NSwitch size="small" v-model:value="value" :disabled="disabled" />
  </div>
</template>

<style lang="less" scoped></style>
